import React, { Component } from "react";
import { NavBar } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import "./Category.scss";
import myaxios from "../../utils/myaxios";
import axios from "axios"
class Category extends Component {
  constructor(props){
    super(props);
    const CancelToken = axios.CancelToken;
    this.source = CancelToken.source();
  }
  state = {
    categories: [], // 返回的菜单数据
    categories_content: [], // 右边菜单渲染的内容
    select_index: 0, // 当前选中左边的菜单
  };
  // 左边分类菜单点击的时候触发
  handleItemClick = (e) => {
    // 获取点击选中的项
    let select_index = e.target.getAttribute("data-index");
    console.log(select_index);
    this.setState({
      select_index: parseInt(select_index),
      categories_content: this.state.categories[select_index].children,
    });
  };
  // 右边图片点击的时候
  handleProductItemClick = (e) => {
    let cid = e.target.getAttribute("data-index");
    // console.log(this.props);
    // console.log(cid);
    this.props.history.push("/goodList/"+cid);
  };
  componentWillUnmount(){
    this.source.cancel("取消分类菜单的请求")
  }
  //获取分类菜单的数据
  getCategories = (params) => {
    myaxios
      .get("categories",{
        cancelToken:this.source.token
      })
      .then((res) => {
        this.setCategories(res);
      })
      .catch((err) => {
        console.log(err);
      });
    };
      //设置分类菜单数据
      //is_storaged 代表是否之前已经缓存过
      setCategories = (res,is_storaged) => {
        //缓存请求的数据
        let categories_cache = {};
        //如果之前没有缓存过
        if (!is_storaged) {
          //直接获取本地缓存中的数据即可
        //   categories_cache = JSON.parse(localStorage.getItem("categories_cache"));
        // } else {
          categories_cache = { date:Date.now(),categories:res};
       
        //缓存到本地中
        localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
        }
        this.setState({
          categories:res,
          categories_content:res[0].children,
        });
      };
    
  componentDidMount() {
    // https://www.linweiqin.cn/api/public/v1/categories
    //进来时，先判断本地缓存是否过期
    //如果没有过期的情况下  直接获取本地缓存
    let categories_cache = localStorage.getItem("categories_cache");
    //如果本地缓存不会空
    if (categories_cache && categories_cache.date){
      //判断本地缓存是否过期
      //当前时间
      let current_time = Date.now();
      //存储的时间
      let storage_time =JSON.parse(categories_cache).date;
      if (current_time - storage_time > 60*60*1000){
        //一小时过期
        this.getCategories();
      } else {
        //缓存没有过期
        //第二个参数  代表是否已经缓存
        this.setCategories(JSON.parse(categories_cache).categories,true);
      }
    } else {
      this.getCategories();
    }
  }
  render() {
    return (
      <div className="yg-category">
        {/* 首页导航条开始 */}
        <div className="yg-category-nav">
          <NavBar className="category-nav">商品分类</NavBar>
        </div>
        {/* 首页导航条结束 */}
        {/* 首页搜索框开始 */}
        <div className="yg-category-search">
          <SearchInput></SearchInput>
        </div>
        {/* 首页搜索框结束 */}
        {/* 分类菜单开始 */}
        <div className="yg-category-content">
          {/* 利用冒泡机制处理点击事件 */}
          <div className="content-left" onClick={this.handleItemClick}>
            {this.state.categories.map((v, index) => {
              return (
                <div
                  data-index={index}
                  className={
                    this.state.select_index === index
                      ? "active content-left-item"
                      : "content-left-item"
                  }
                  key={v.cat_id}
                >
                  {v.cat_name}
                </div>
              );
            })}
          </div>
          <div className="content-right">
            {this.state.categories_content.map((v, i) => {
              return (
                <div className="content-right-item" key={v.cat_id}>
                  {/* 二级菜单标题开始 */}
                  <div className="right-item-title">
                    {"/"}
                    {v.cat_name}
                    {"/"}
                  </div>
                  {/* 二级菜单标题结束 */}
                  {/* 产品列表开始 */}
                  <div className="product-list" 
                       onClick={this.handleProductItemClick}
                       >
                    {v.children&&
                      v.children.map(v=>{
                        return( <div 
                        key={v.cat_id}
                        className="product-list-item" data-index={v.cat_id}>
                            <div className="imagerWrapper">
                              <img src={v.cat_icon} alt="" data-index={v.cat_id} />
                            </div>
                            <div className="item-title">
                              {v.cat_name}
                            </div>
                        </div>
                        );
                      })
                    }
                  </div>
                  {/* 产品列表结束 */}

                </div>
              );
            })}
          </div>
        </div>
        {/* 分类菜单结束 */}
      </div>
    );
  }
}

export default Category;
